import { PenEventProps } from "@/types";
import { FormRowCol } from "@/components/common/FormRowCol.tsx";
import { Button } from "antd";
import { PensSelection } from "@/components/common/PensSelection.tsx";
import { DeleteOutlined } from "@ant-design/icons";
import { useEffect, useState } from "react";
import { Event } from "@meta2d/core";
import { EventAction } from "@meta2d/core";

export function EventSetTarget(props: PenEventProps) {
  const [open, setOpen] = useState(false);
  const [targetKey, setTargetKey] = useState<keyof Event>("params");
  const onSelect = (choosePenId: any) => {
    if (choosePenId == "") {
      props.onChange(targetKey, undefined, props.index);
    } else {
      props.onChange(targetKey, choosePenId, props.index);
    }
    setOpen(false);
  };
  useEffect(() => {
    let paramsArr = [
      EventAction.StartAnimate,
      EventAction.PauseAnimate,
      EventAction.StopAnimate,
      EventAction.StartVideo,
      EventAction.PauseVideo,
      EventAction.StopVideo,
    ];
    if (paramsArr.includes(props.item.action)) {
      setTargetKey(() => "value");
    }
  }, []);

  return (
    <FormRowCol label="事件目标" illustrate={"默认自身"}>
      <PensSelection
        value={
          typeof props.item[targetKey] == "string"
            ? (props.item[targetKey] as string)
            : ""
        }
        open={open}
        onOk={onSelect}
        onClose={() => setOpen(false)}
      ></PensSelection>
      <Button onClick={() => setOpen(true)} style={{ marginRight: 5 }}>
        {typeof props.item[targetKey] == "string"
          ? (props.item[targetKey] as string)
          : "选择"}
      </Button>
      <Button
        onClick={() => props.onChange(targetKey, undefined, props.index)}
        icon={<DeleteOutlined />}
      ></Button>
    </FormRowCol>
  );
}
